<template>
  <div class="content">
    <e-heading grade='1'>{{$route.query.type == 2 ? '销课记录' : '上课情况'}}( {{train_student_course_info.studentName}} )</e-heading>
    <div class="situation-detail">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <p>班级名称：{{train_student_course_info.className}}</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <p>校区：{{train_student_course_info.schoolName}}</p>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <p>课程：{{train_student_course_info.courseName}}</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              上课时间：<span v-if="train_student_course_info.beginTime">{{train_student_course_info.beginTime ? new Date(train_student_course_info.beginTime).format('yyyy-MM-dd') : ''}}~{{train_student_course_info.endTime ? new Date(train_student_course_info.endTime).format('yyyy-MM-dd') : ''}}</span><span v-else>未设置</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <p>班别：{{train_student_course_info.classesName}}</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">   
              <p>开课状态：{{['未上课', '已上课', '已结束'][train_student_course_info.startStatus]}}</p>
            </div>
          </el-col>
        </el-row>
    </div>

    <div class="main">
      <div class="divide"></div>
      <div class="situation" v-if="$route.query.type == 1 || $route.query.type == 0">
        <div class="detail">共 <span>{{train_course_time_count.count}}</span> 课时,课程已上 <span>{{train_course_time_count.overCount}}</span> 课时，学员已上 <span>{{train_course_time_count.studentOverCount}}</span> 课时，待补课 <span class="special">{{train_course_time_count.waitMakeupCount}}</span> 课时</div>
        <el-table
          :data="train_student_course.list"
          v-bind="getTableProps()"
          empty-text="暂无上课记录"
          :row-class-name="tableRowClassName">
          <el-table-column
            label="课时" 
            align="center"
            width="170">
            <template slot-scope="scope">
              课时{{scope.$index + 1 + (train_student_course.page - 1) * 15}}
            </template>
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="课时名称" 
            align="center" 
            width="160">
          </el-table-column>
          <el-table-column
            label="上课时间" 
            align="center" 
            width="130">
            <template slot-scope="scope">
              <div>{{scope.row.beginDate ? new Date(scope.row.beginDate).format('yyyy-MM-dd') : ''}} {{scope.row.beginWeekCode | getWeekDay}}</div> 
              <div>{{new Date(scope.row.startTime).format('hh:mm')}}-{{new Date(scope.row.endTime).format('hh:mm')}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="上课地点" 
            align="center" 
            width="160">
          </el-table-column>
          <el-table-column
            label="上课情况">
            <template slot-scope="scope">
              <span :class="[scope.row.status  === 2 ? special: '']" v-if="scope.row.status === 1">出勤</span>
              <span :class="[scope.row.status  === 2 ? special: '']" v-if="scope.row.status === 0"></span>
              <span :class="[scope.row.status  === 2 ? special: '']" v-if="scope.row.status === 2 && !scope.row.makeupSchedule">
                缺勤-待补课
              </span>
              <span v-if="scope.row.status === 2 && scope.row.makeupSchedule">
                <div :class="[scope.row.status  === 2 ? special: '']">缺勤</div>
                <div>
                  <div>【补课】 {{scope.row.makeupSchedule.className}}</div>
                  <div>{{scope.row.makeupSchedule.beginDate ? new Date(scope.row.makeupSchedule.beginDate).format('yyyy-MM-dd') : ''}} {{scope.row.makeupSchedule.beginWeekCode | getWeekDay}} {{new Date(scope.row.makeupSchedule.startTime).format('hh:mm')}}-{{new Date(scope.row.makeupSchedule.endTime).format('hh:mm')}}</div> 
                  <div>{{scope.row.makeupSchedule.address}}</div>
                </div>
              </span>
              <span :class="[scope.row.status  === 3 ? special: '']" v-if="scope.row.status === 3 && !scope.row.makeupSchedule">
                请假-待补课
              </span>
              <span v-if="scope.row.status === 3 && scope.row.makeupSchedule">
                <div :class="[scope.row.status  === 3 ? special: '']">请假</div>
                <div>
                  <div>【补课】 {{scope.row.makeupSchedule.className}}</div>
                  <div>{{scope.row.makeupSchedule.beginDate ? new Date(scope.row.makeupSchedule.beginDate).format('yyyy-MM-dd') : ''}} {{scope.row.makeupSchedule.beginWeekCode | getWeekDay}} {{new Date(scope.row.makeupSchedule.startTime).format('hh:mm')}}-{{new Date(scope.row.makeupSchedule.endTime).format('hh:mm')}}</div> 
                  <div>{{scope.row.makeupSchedule.address}}</div>
                </div>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-bind="getPaginationProps(train_student_course)"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          >
        </el-pagination>
      </div>
      <div v-else class="situation">
        <el-table
          v-bind="getTableProps()"
          empty-text="暂无销课记录"
          :data="train_student_course.list">
          <el-table-column
            prop="signinValue"
            :label="`销课次数(${percentage})`"
            align="center"
            width="140">
          </el-table-column>
          <el-table-column
            label="上课时间" 
            align="center" 
            width="130">
            <template slot-scope="scope">
              <div>{{scope.row.beginDate ? new Date(scope.row.beginDate).format('yyyy-MM-dd') : ''}} {{scope.row.beginWeekCode | getWeekDay}}</div> 
              <div>{{new Date(scope.row.startTime).format('hh:mm')}}-{{new Date(scope.row.endTime).format('hh:mm')}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="上课地点" 
            :show-overflow-tooltip="true"
            align="center" 
            width="160">
          </el-table-column>
          <el-table-column
            prop="teacher"
            label="授课教练" 
            :show-overflow-tooltip="true"
            align="center" 
            width="100">
          </el-table-column>
          <el-table-column
            prop="operateTime"
            label="操作时间" 
            align="center" 
            width="155">
            <template slot-scope="scope">
              {{scope.row.modifyTime ? new Date(scope.row.modifyTime).format('yyyy-MM-dd h:m') : '--'}}
            </template>  
          </el-table-column>
          <el-table-column
            label="操作人"
            prop="modifyId"
            :show-overflow-tooltip="true"
            width="140"
            align="center">            
          </el-table-column>
        </el-table>
        <el-pagination
          v-bind="getPaginationProps(train_student_course)"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {pagingList} from 'utils/mixins'
import { mapGetters } from 'vuex'
export default {
  mixins: [pagingList],
  computed: {
    ...mapGetters({
      train_student_course_info: 'train_student_course_info', // 学员详情
      train_student_course: 'train_student_course', // 学员在上课情况列表
      train_course_time_count: 'train_course_time_count' // 课时信息
    }),
    percentage: {
      get () {
        if (this.train_student_course && this.train_student_course.list && this.train_student_course.list.length) {
          let total = this.train_student_course.list[0].total
          return this.train_student_course.list[0].signinTotal + '/' + (total === 0 ? '-' : total)
        } else {
          return 0
        }
      }
    }
  },
  data () {
    return {
      special: 'special',
      query: this.getQuery()
    }
  },
  mounted () {
    this.$store.dispatch('train_student_course_info', {
      studentId: this.$route.query.studentId,
      classId: this.$route.query.classId,
      studentSignupId: this.$route.query.studentSignupId
    })
    this.$store.dispatch('train_course_time_count', {
      studentId: this.$route.query.studentId,
      classId: this.$route.query.classId,
      studentSignupId: this.$route.query.studentSignupId
    })
  },
  methods: {
    fetch (query) {
      let queryInit = Object.assign({
        studentId: this.$route.query.studentId,
        classId: this.$route.query.classId,
        studentSignupId: this.$route.query.studentSignupId
      }, query)
      this.$store.dispatch('train_student_course', queryInit)
    },
    tableRowClassName (row, index) {
      if (row.status === 0) {
        return 'weak'
      }
      return ''
    }
  }
}
</script>

<style lang="scss">

.content {
  .situation-detail {
    .el-row {
      margin-top: 30px;
    }
  }
  .main {
    min-height: 100%;
    background: #fff;
    .divide {
      margin: 30px -60px 0;
      border-top: 20px solid$color-background;
    }
    .situation {
      margin-top: 30px;
      .detail {
        margin-bottom: 30px;
        span {
          font-weight: 900;
          font-size: 14px;
          &.special {
            color: red
          }
        }
      }
      .special {
        color: red
      }
    }
  }
}
</style>
